<template>
  <div class="registAll">
    <div>
      <el-card class="box-card">
        <div><h2>注册</h2></div>
        <el-form
          :model="ruleForm"
          status-icon
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="用户名" prop="userName">
            <el-input
              type="userName"
              v-model="ruleForm.userName"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="pass">
            <el-input
              type="password"
              v-model="ruleForm.pass"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="确认密码" prop="checkPass">
            <el-input
              type="password"
              v-model="ruleForm.checkPass"
              autocomplete="off"
            ></el-input>
          </el-form-item>

          <el-form-item label="用户昵称" prop="realName">
            <el-input
              type="realName"
              v-model="ruleForm.realName"
              autocomplete="off"
            ></el-input>
          </el-form-item>

          <el-form-item label="地址" prop="address">
            <el-input
              type="address"
              v-model="ruleForm.address"
              autocomplete="off"
            ></el-input>
          </el-form-item>

          <el-form-item label="年龄" prop="age">
            <el-input v-model.number="ruleForm.age"></el-input>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')"
              >提交</el-button
            >
            <el-button @click="resetForm('ruleForm')">重置</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>
    <div class="caro">
      <Carousel></Carousel>
    </div>
  </div>
</template>

<script>
import Carousel from "@/components/Carousel.vue";
import { registUser } from "@/api/user";
import Cookies from "js-cookie";
export default {
  components: {
    Carousel,
  },
  data() {
    var userName = (rule, value, callback) => {
      const regex = /^[A-Za-z0-9]+$/;
      if (value === "") {
        callback(new Error("请输入用户名"));
      } else if (!regex.test(this.ruleForm.userName)) {
        callback(new Error("请输数字或字母"));
      } else {
        if (this.ruleForm.userName !== "") {
          //this.$refs.ruleForm.validateField('userName');
          callback();
        }
      }
    };
    var checkAge = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("年龄不能为空"));
      }
      setTimeout(() => {
        if (!Number.isInteger(value)) {
          callback(new Error("请输入数字值"));
        } else {
          if (value < 18) {
            callback(new Error("必须年满18岁"));
          } else {
            callback();
          }
        }
      }, 1000);
    };
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.ruleForm.checkPass !== "") {
          this.$refs.ruleForm.validateField("checkPass");
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.ruleForm.pass) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      ruleForm: {
        usesrName: "",
        pass: "",
        checkPass: "",
        age: "",
        realName: "",
        address: "",
      },
      rules: {
        userName: [{ validator: userName, trigger: "blur" }],
        pass: [{ validator: validatePass, trigger: "blur" }],
        checkPass: [{ validator: validatePass2, trigger: "blur" }],
        age: [{ validator: checkAge, trigger: "blur" }],
      },
    };
  },
  methods: {
    submitForm(formName) {
      const vm = this;
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const params = {
            userName: this.ruleForm.userName,
            password: this.ruleForm.pass,
            age: this.ruleForm.age,
            realName: this.ruleForm.realName,
            address: this.ruleForm.address,
          };
          registUser(params).then((res) => {
            if (res.code == 0) {
              Cookies.set("expire", res.data.token, { expires: 3600 });
              vm.$router.push("/"); // 跳转到主页
            } else if (res.code == 1) {
              ms.$message.error(res.msg);
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>

<style scoped>
.registAll {
  height: 100%;
  display: flex;
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
  background-color: rgb(243, 220, 220);
  flex-wrap: wrap;
}
.caro {
  width: 100%;
  margin-top: 2%;
}
.text {
  font-size: 14px;
}

.item {
  padding: 18px 0;
}

.box-card {
  width: 580px;
  /* margin-right: 60%;
  margin-top: 10%; */
}
</style>
